<html>
  <head>
    <title>HTML 文档结构</title>
  </head>

  <body>
    <div class="group">
      <!-- 输入框 -->
      <input type="text" class="todovalue" name="todovaluename" id="todovalueId" placeholder="请输入todo内容" onkeydown="valueChange=(event)"/>
      <input type="button" value="BUTTON2" onclick="handleClink()"></input>
      
      <button type="button" id="button3">BUTTON3</button>
      
      
      <!-- 遍历数据 -->
     <div id="todoList">
        <div class="item" id="item0">
            <input class="item-chk" type="checkbox"/>
            <div class="item-sp">吃饭</div>
            <input id="item-del-0" class="item-del" type="button" value="删除" 
        onclick="handleDelCLick(0)"></input>
    </div>
        <div class="item" id="item1">
            <input class="item-chk" type="checkbox"/>
            <div class="item-sp">睡觉</div>
            <input id="item-del-1" class="item-del" type="button" value="删除" 
            onclick="handleDelCLick(1)"></input>
       </div>
        <div class="item" id="item2">
        <input class="item-chk" type="checkbox"/>
        <div class="item-sp">打豆豆</div>
        <input id="item-del-2" class="item-del" type="button" value="删除" 
        onclick="handleDelCLick(2)"></input>
       </div>
    </div>

      <!-- 操作的footer -->
    </div>
  </body>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .group {
      border: 3px solid rgba(0, 0, 255, 0.493);
      padding: 10px;
      border-radius: 20px;
    }
    .item{
       
       
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display:flex;
        align-items: center;

    }
    .item:hover{
        background-color:rgba(30, 0, 255, 0.274);
        transform: scale(1.5,1.5);
        
    }
    .item-sp{
        flex-grow: 1;
    }
    .item-del{
        background-color:rgba(3, 24, 249, 0.486);
        border: 0px;
        color: aliceblue;

    }
    .todovalue{
        border:2px solid #010dba95;
        padding: 6px;
        outline:none;
    }
    .todovalue:focus{
        box-shadow:0px 0px 5px rgba(5, 2, 199, 0.61) ;
        border:2px solid #0c27f89d;
        outline:none;
    }
  </style>
  <script lang="javascript">
    //alert("test")
    var index=0;
    function init(){
       document.getElementById("button3").onclick=handleClink;
     //  document.getElementById("input").keydown(function(event){
      //  if(event.keyCode==13){
      //      var v= document.getElementById("todovalueId").value;
      //      console.log(v);
        
      //  }
     //  });
    }
  function valueChange(e){
    console.log(e);
    if(event.keyCode==13){
        handleClink();
        }
  }
    function handleClink(){
       var temp=document.getElementsByName("todovaluename")[0].value;
       // alert("我被按了"+index++)
       var div= document.createElement("div");
       div.innerText=temp;
       document.getElementById("todoList").append(div);
    }
    function test1(index){
        console.log("aa")
        document.getElementById("todoList").children[index].style="backgroud-color:blue";
        document.getElementById("item-del-"+index).style="opacity:1;";
    }
    function test2(index){
        console.log("bb")
        document.getElementById("todoList").children[index].style="";
        document.getElementById("item-del-"+index).style="opacity:0;";
    
    }  
    function handleDelCLick(index){
        var arr=document.getElementById("todoList");
        document.getElementById("item"+index).remove();
    }
   init();
  </script>
</html>
